<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event</title>

    <style>

        #img{

            width: 400px;
            height: 200px;
            border: 1px solid black;
            background-image: url('./img/1.png');
        }

        .clock {
            background: #34495e;
            border-radius: 15px;
            padding: 30px;
            color: #ecf0f1;
            font-size: 48px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            user-select: none;
        }

        .clock span {
            display: inline-block;
            padding: 0 10px;
        }

        .clock span:nth-child(2n) {
            color: #e74c3c;
        }

    </style>
</head>
    </style>
</head>
<body>

    <div id="checkbox">

        <input type="checkbox" name="all" id="all" value="1" ><label for="all">全选</label>
        <input type="checkbox" name="check1" id="check1" value="1" ><label for="check1">1</label>
        <input type="checkbox" name="check2" id="check2" value="2"><label for="check2">2</label>
        <input type="checkbox" name="check3" id="check3" value="3"><label for="check3">3</label>
        <input type="checkbox" name="check4" id="check4" value="4"><label for="check4">4</label>
    
    </div>

    <div id = "img"> 

        <button>下一页</button>

    </div>

    <div class="clock" id="clock">
        <div> <span>2021</span>年</div>
        <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>

        <button onclick="turnoff()">停止时钟</button>
    </div>
   


    <script>
       
         let checks = document.querySelectorAll("input[type='checkbox']")

         let all = document.querySelector('#all');

         let next = document.querySelector('#img button')

         let img = document.querySelector('#img');

         let h = document.querySelector('.clock #hours');
         let m = document.querySelector('.clock #minutes');
         let s = document.querySelector('.clock #seconds');

         let count = 1;

         window.onload = setClock;

         
         let nextPage = function(){
            console.log(`当前计数器是${count}`);

            let url = "url('./img/"+ (count++>=3?count = 1:count)+ ".png')"

        console.log(url);
            img.style.backgroundImage = url
         }

         function setClock(){

            // clock.innerHTML = new Date().toLocaleDateString() +"  :  " +new Date().toLocaleTimeString();;

            let date = new Date();

            h.innerHTML = date.getHours();
            m.innerHTML = date.getMinutes();
            s.innerHTML = date.getSeconds();
         }

         next.addEventListener('click',nextPage)

         /* 标签属性的更改 */
//          all.onselect = function(){

//             for(let i = 1;i<checks.length;i++){

//                 checks[i].checked = checks[0].checked;
// }
//          }

         /* 对控件事件的监听(最常用的) */


         let all_selcet = function(){

            for(let i = 1;i<checks.length;i++){

             checks[i].checked = checks[0].checked;
        }
    }
        /* 语法  节点.addEventlinstener('event',函数名) */
         all.addEventListener('change',all_selcet);

         /* 定时器 */
        let sId = setInterval(nextPage,1000)
        let sId1 = setInterval(setClock,1000)

        function turnoff(){
            clearInterval(sId1);
        }
        
    </script>
</body>
</html>